<template>
  <view class="container">
    <view class="form-item">
      <view class="label">运动项目：</view>
      <input
        class="input-field"
        type="text"
        v-model="caloriesFoodUser.foodName"
        placeholder="请输入运动项目"
      />
    </view>
    <view class="form-item">
      <view class="label">消耗热量：</view>
      <input
        class="input-field"
        type="number"
        v-model="caloriesFoodUser.totalCalorie"
        placeholder="请输入多少千卡"
      />
    </view>
    <view class="form-item">
      <view class="label">选择时间: </view>
      <input
        class="input-field"
        type="text"
        v-model="caloriesFoodUser.time"
        placeholder="请选择时间"
        @click="isShowTime = true"
        readonly
        disabled
      />
      <u-picker
        v-model="isShowTime"
        mode="time"
        :params="params"
        @confirm="pickTime"
      ></u-picker>
      <!-- <input @click="isShowTime = true" v-text="caloriesFoodUser.time">选择时间</input> -->
    </view>
    <u-button @click="submit()" hover-class="none">提交</u-button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      caloriesFoodUser: {
        foodName: "",
        totalCalorie: "",
        time: "",
        userId: 0,
        type: '运动消耗'
      },
      params: {
        year: true,
        month: true,
        day: true,
        hour: true,
        minute: true,
        second: true,
      },
      isShowTime: false,
    };
  },
  methods: {
    isValidDateTimeFormat(dateTime) {
      const dateTimeRegex = /^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}$/;
      return dateTimeRegex.test(dateTime);
    },
    submit() {
      const { hostname, comment: { userId } } = this.$store.state.moduleCommon;
      const { foodName, totalCalorie, time } = this.caloriesFoodUser;

      this.caloriesFoodUser.userId = userId;

      // 判空
      if (foodName === "" || totalCalorie === "" || time === "") {
        uni.showToast({
          title: "请填写完整信息",
          icon: "none",
        });
        return;
      }
      // 合法性
      if (!this.isValidDateTimeFormat(time)) {
        uni.showToast({
          title: "时间非法",
          icon: "none",
        });
        return;
      }
      uni.request({
        url: `${hostname}/api/Calories/user/calories`,
        method: "PUT",
        data: this.caloriesFoodUser,
        success: (res) => {
          // console.log(res);
          uni.reLaunch({
            url: "/pages/healthy/healthy",
          });
        },
      });
    },
    pickTime({ year, month, day, hour, minute, second }) {
      // console.log("params", params);
      this.caloriesFoodUser.time = `${year}-${month}-${day} ${hour}:${minute}:${second}`;
      // console.log("this.caloriesFoodUser.time", this.caloriesFoodUser.time);
    },
  },
};
</script>

<style lang="scss">
.container {
  padding: 20rpx;
}

.form-item {
  display: flex;
  margin-bottom: 20rpx;
  align-items: center;
}

.label {
  width: 150rpx;
  font-size: 30rpx;
  color: #333;
}

.input-field {
  flex: 1;
  padding: 8rpx;
  border: 1px solid #ccc;
  border-radius: 4rpx;
  font-size: 30rpx;
}
</style>